<template>
  <div class="zy-content">
    <div class="searchBox search-box-layout">
      <Row :gutter="24">
        <Col span="4">
          <div>
            <p class="label">{{ $t('fault.UpgradeStage') }}</p>
            <div class="ipt">
              <Select v-model="searchParams.upgradeNode" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
                <Option v-for="(item, index) of upgradeNodeList" :value="item.id" :key="index" :label="item.name"></Option>
              </Select>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">{{ $t('fault.Level') }}</p>
            <div class="ipt">
              <Select v-model="searchParams.grade" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
                <Option v-for="(item, index) of gradeList" :value="item.id" :key="index" :label="item.name"></Option>
              </Select>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">{{ $t('fault.Role') }}</p>
            <div class="ipt">
              <Select v-model="searchParams.upgradeRole" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
                <Option v-for="(item, index) of upgradeRoleList" :value="item.id" :key="index" :label="item.name"></Option>
              </Select>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">{{ $t('fault.Type') }}</p>
            <div class="ipt">
              <Select v-model="searchParams.upgradeType" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
                <Option v-for="(item, index) of upgradeTypeList" :value="item.id" :key="index" :label="item.name"></Option>
              </Select>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label hide-label">--</p>
            <div class="ipt">
              <Button class="search-btn" v-has="'faultBasicUpgradeSearch'" type="primary" @click="changeNum()">{{ $t('common.Query') }}</Button>
              <Button v-has="'faultBasicUpgradeSearch'"
                  class="reset-btn"
                  @click="reset()"
              >{{ $t('common.reset') }}
              </Button>
            </div>
          </div>
        </Col>
      </Row>
    </div>



<!--    <div>-->
<!--      <Form label-position="right" :label-width="120" class="search-form">-->
<!--        <Row>-->
<!--          <Col span="5">-->
<!--          <FormItem :label="$t('fault.UpgradeStage')">&lt;!&ndash;升级阶段&ndash;&gt;-->
<!--            <Select v-model="searchParams.upgradeNode" filterable clearable :placeholder="`${$t('common.selectInfo')}`">-->
<!--              <Option v-for="(item, index) of upgradeNodeList" :value="item.id" :key="index">{{ item.name }}</Option>-->
<!--            </Select>-->
<!--          </FormItem>-->
<!--          </Col>-->
<!--          <Col span="5">-->
<!--          <FormItem :label="$t('fault.Level')">&lt;!&ndash;升级等级：  &ndash;&gt;-->
<!--            <Select v-model="searchParams.grade" filterable clearable :placeholder="`${$t('common.selectInfo')}`">-->
<!--              <Option v-for="(item, index) of gradeList" :value="item.id" :key="index">{{ item.name }}</Option>-->
<!--            </Select>-->
<!--          </FormItem>-->
<!--          </Col>-->
<!--          <Col span="5">-->
<!--          <FormItem :label="$t('fault.Role')">&lt;!&ndash;升级角色：  &ndash;&gt;-->
<!--            <Select v-model="searchParams.upgradeRole" filterable clearable :placeholder="`${$t('common.selectInfo')}`">-->
<!--              <Option v-for="(item, index) of upgradeRoleList" :value="item.id" :key="index">{{ item.name }}</Option>-->
<!--            </Select>-->
<!--          </FormItem>-->
<!--          </Col>-->
<!--          <Col span="5">-->
<!--          <FormItem :label="$t('fault.Type')">&lt;!&ndash;升级类型：  &ndash;&gt;-->
<!--            <Select v-model="searchParams.upgradeType" filterable clearable :placeholder="`${$t('common.selectInfo')}`">-->
<!--              <Option v-for="(item, index) of upgradeTypeList" :value="item.id" :key="index">{{ item.name }}</Option>-->
<!--            </Select>-->
<!--          </FormItem>-->
<!--          </Col>-->
<!--          <Col span="2" align="center">-->
<!--          <Button type="primary" @click="changeNum()">{{ $t('common.Query') }}</Button>-->
<!--          </Col>-->
<!--        </Row>-->
<!--      </Form>-->
<!--    </div>-->
    <div class="list-layout mt16">
      <div class="btns clear">
        <span class="title">{{ $t('common.listInformation') }}</span>


        <Button  @click="addClickinfo({})" v-has="'faultBasicUpgradeAdd'">{{ $t('common.New') }}</Button>
        <Button  @click="deleteAll" v-has="'faultBasicUpgradeDeleteAll'">{{ $t('common.batchDelete') }}</Button>
        <Button  @click="exportTemplateClick" v-has="'faultBasicUpgradeExport'">{{ $t('common.batchExport') }}</Button>
        <Button  @click="importExcelShow" v-has="'faultBasicUpgradeImport'">{{ $t('common.Import') }}</Button>
        <Button  @click="exportTemplate" v-has="'faultBasicUpgradeDown'">{{ $t('common.Download') }}</Button>



<!--      <span class="creatBtnright" >-->
<!--        <span>-->
<!--          <Icon type="ios-add-circle-outline" />-->
<!--        </span>-->
<!--        <span class="rightbtn">{{ $t('common.New') }}</span>&lt;!&ndash;新增  &ndash;&gt;-->
<!--      </span>-->
<!--        <span class="creatBtnright" @click="exportTemplateClick" v-has="'faultBasicUpgradeExport'">-->
<!--        <span>-->
<!--          <Icon type="ios-cloud-download-outline" />-->
<!--        </span>-->
<!--        <span class="rightbtn">{{ $t('common.batchExport') }}</span>&lt;!&ndash;批量导出  &ndash;&gt;-->
<!--      </span>-->
<!--        <span class="creatBtnright" @click="importExcelShow" v-has="'faultBasicUpgradeImport'">-->
<!--        <span>-->
<!--          <Icon type="ios-cloud-upload-outline" />-->
<!--        </span>-->
<!--        <span class="rightbtn">{{ $t('common.Import') }}</span>&lt;!&ndash;批量导入  &ndash;&gt;-->
<!--      </span>-->
<!--        <span class="creatBtnright" @click="exportTemplate" v-has="'faultBasicUpgradeDown'">-->
<!--        <span>-->
<!--          <Icon type="ios-cloud-download-outline" />-->
<!--        </span>-->
<!--        <span class="rightbtn">{{ $t('common.Download') }}</span>&lt;!&ndash;下载模板  &ndash;&gt;-->
<!--      </span>-->
<!--        <span class="creatBtnright" @click="deleteAll" v-has="'faultBasicUpgradeDeleteAll'">-->
<!--        <span>-->
<!--          <Icon type="ios-trash-outline" />-->
<!--        </span>-->
<!--        <span class="rightbtn">{{ $t('common.batchDelete') }}</span>&lt;!&ndash;批量删除  &ndash;&gt;-->
<!--      </span>-->
      </div>
      <div class="tableContent">
        <Table :columns="columns" :data="dataSource" @on-selection-change="onSelectChange">
          <template slot-scope="{ row }" slot="action">
          <span class="operationBtn" v-has="'faultBasicUpgradeEdit'"
                @click="addClickinfo(row)"><i class="iconfont zy-common-bianji"></i>{{ $t('common.Edit') }}</span>
            <span class="operationBtn" v-has="'faultBasicUpgradeDelete'"
                  @click="(deleteModal = true), (deleteIds = [row.id])"><i class="iconfont zy-common-shanchu"></i>{{ $t('common.Delete') }}</span><!--删除  -->
          </template>
        </Table>
      </div>
      <div class="pageWrap mt16">
<!--        <p class="left-title">-->
<!--          共{{ total }}条，已选中{{ deleteIds.length }}条-->
<!--        </p>-->
        <pageLeftTitle :total="total" :selected="deleteIds.length" />
        <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum"
              @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
      </div>
    </div>
    <Modal :mask-closable="false" v-model="addModal" :title="addtitle" class="modal-content-layout">
      <Form ref="formValidate" class="formList" :model="formItem" :rules="getRules"  label-position="top">
        <FormItem :label="$t('fault.UpgradeStage')" prop="upgradeNode"><!--升级阶段：  -->
          <Select v-model="formItem.upgradeNode" filterable clearable :placeholder="`${$t('common.selectInfo')}`" @on-change="handleChange">
            <Option v-for="(item, index) of upgradeNodeList" :value="item.id" :key="index">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem :label="$t('fault.Level')" prop="grade"><!--升级等级：  -->
          <Select v-model="formItem.grade" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
            <Option v-for="(item, index) of gradeList" :value="item.id" :key="index">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem :label="$t('fault.Role')" prop="upgradeRole"><!--升级角色：  -->
          <Select v-model="formItem.upgradeRole" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
            <Option v-for="(item, index) of upgradeRoleList" :value="String(item.id)" :key="index">{{ item.name }}
            </Option>
          </Select>
        </FormItem>
        <FormItem :label="$t('fault.Type')" prop="upgradeType"><!--升级类型：  -->
          <Select v-model="formItem.upgradeType" filterable clearable :disabled="formItem.upgradeNode === '0'"
                  :placeholder="`${$t('common.selectInfo')}`" @on-change="formItem.remark = ''">
            <Option v-for="(item, index) of upgradeTypeList" :value="item.id" :key="index">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem v-if="formItem.upgradeType" :label="formItem.upgradeType === '0' ? $t('fault.Interval') : $t('fault.Reason')" prop="remark">
          <Input v-show="formItem.upgradeType === '0'" :placeholder="`${$t('common.inputInfo')}`" type="text" v-model="formItem.remark"><span
            slot="append">{{ $t('fault.minute') }}</span></Input><!--分钟  -->
          <Input v-show="formItem.upgradeType === '1'" :placeholder="`${$t('common.inputInfo')}`" type="text"
            v-model="formItem.remark"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="default" @click="addModal = false">{{ $t('common.Cancle') }}</Button>
        <Button type="primary" @click="handleSubmit('formValidate')">{{ $t('maintenance.Confirmed') }}</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" v-model="deleteModal" :title="$t('common.Delete')" class="modal-title-layout">
      <div class="icon red">
        <i class="iconfont zy-common-shanchu"></i>
      </div>
      <p class="title">
        <span>{{$t('common.confirmDelete')}}</span>
      </p>
      <div slot="footer">
        <Button type="default" @click="deleteModal = false">{{ $t('common.Cancle') }}</Button>
        <Button type="primary" @click="handleDelete">{{ $t('maintenance.Confirmed') }}</Button>
      </div>
    </Modal>
    <importExcelModal :importExcelStateF="importExcelState" v-if="importExcelState"
      @importExcelChange="importExcelChange"></importExcelModal>
  </div>
</template>

<script>
import fileDownload from "js-file-download";
import importExcelModal from "@/components/importExcel.vue";
export default {
  name: "faultClassify",
  components: { importExcelModal },
  data() {
    return {
      searchParams: {
        upgradeNode: '',
        grade: '',
        upgradeRole: '',
        upgradeType: '',
      },
      upgradeNodeList: [
        { name: '未接单', id: '0' },
        { name: '维修中', id: '1' },
      ],
      gradeList: [
        { id: 1, name: '一级' },
        { id: 2, name: '二级' },
        { id: 3, name: '三级' },
      ],
      upgradeRoleList: [],
      upgradeTypeList: [
        { name: '按时间升级', id: '0' },
        { name: '按原因升级', id: '1' },
      ],
      total: 0, // 总数
      pageNum: 1, // 页数
      pageSize: 10, // 每页的个数
      pageSizeOption: [10, 20, 30],
      addModal: false, // 新增弹窗
      addtitle: "新增故障分类", // 新增/编辑 标题
      formItem: {
        // 新增编辑form
        upgradeNode: "",
        grade: "",
        upgradeRole: "",
        upgradeType: "",
        remark: "",
      },
      deleteModal: false, // 删除弹窗
      deleteIds: [], // 删除Id
      importExcelState: false, // 导入弹窗
      columns: [
        {
          key: "selection",
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          //title: "升级阶段",
          title: `${this.$t('fault.UpgradeStage')}`,
          key: "upgradeNode",
          align: "center",
          render: (h, params) => {
            return h(
              "div",
              params.row.upgradeNode === 0
                ? "未接单"
                : "维修中"
            );
          },
        },
        {
          //title: "升级等级",
          title: `${this.$t('fault.Level')}`,
          key: "grade",
          align: "center",
          render: (h, params) => {
            return h(
              "div",
              params.row.grade == 1 ? '一级' : params.row.grade == 2 ? '二级' : '三级'
            );
          },
        },
        {
         // title: "升级角色",
         title: `${this.$t('fault.Role')}`,
          key: "upgradeRole",
          align: "center",
        },
        {
          //title: "升级类型",
          title: `${this.$t('fault.Type')}`,
          key: "upgradeType",
          align: "center",
          render: (h, params) => {
            return h(
              "div",
              params.row.upgradeType === 0
                ? "按时间升级"
                : "按原因升级"
            );
          },
        },
        {
         // title: "备注",
         title: `${this.$t('备注1')}`,
          key: "createTime",
          align: "center",
          render: (h, params) => {
            return h(
              "div",
              params.row.upgradeType === 0
                ? params.row.upgradeInterval + "分钟"
                : params.row.upgradeReason
            );
          },
        },
        {
        //  title: "创建人",
        title: `${this.$t('common.CreateBy')}`,
          key: "createBy",
          align: "center",
        },
        {
          //title: "创建时间",
          title: `${this.$t('common.CreateTime')}`,
          key: "createTime",
          align: "center",
        },
        {
          title: `${this.$t('common.operation')}`,
          slot: "action",
          align: "center",
        },
      ],
      dataSource: [],
      getRules: {
        upgradeNode: [
          { required: true, message: "升级阶段必选", trigger: "change" },
        ],
        grade: [
          { required: true, type: 'number', message: "升级等级必选", trigger: "change" },
        ],
        upgradeRole: [
          { required: true, message: "升级角色必选", trigger: "change" },
        ],
        upgradeType: [
          { required: true, message: "升级类型必选", trigger: "change" },
        ],
        remark: [
          { required: true, message: "该项不能为空", trigger: "blur" },
        ]
      }
    };
  },
  // computed: {
  //   getRules() {
  //     return ({
  //       upgradeNode: [
  //         { required: true, message: "升级阶段必选", trigger: "change" },
  //       ],
  //       grade: [
  //         { required: true, message: "升级等级必选", trigger: "change" },
  //       ],
  //       upgradeRole: [
  //         { required: true, message: "升级角色必选", trigger: "change" },
  //       ],
  //       upgradeType: [
  //         { required: true, message: "升级类型必选", trigger: "change" },
  //       ],
  //       remark: [
  //         { required: true, message: `${this.formItem.upgradeType === '0' ?  '升级间隔' : '升级原因'}必填`, trigger: "blur" },
  //       ]
  //     })
  //   }
  // },
  created() {
    this.searchList();
    this.getRoleList()
  },
  methods: {
    handleChange(val) {
      if (val === '0') {
        this.formItem.upgradeType = '0'
        this.formItem.remark = ''
      } else {
        this.formItem.upgradeType = ''
      }
    },
    getRoleList() {
      this.axios({
        method: "get",
        url: "/basic/roleSuperior/queryRoleByName",
        params: {},
      }).then((res) => {
        if (res.code === 200) {
          this.upgradeRoleList = res.data
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    addClickinfo(row) {
      if (row.id) {
        this.addtitle = `${this.$t('fault.EditEscalation')}`
        this.formItem = {
          upgradeNode: '' + row.upgradeNode,
          grade: row.grade,
          upgradeRole: '' + this.upgradeRoleList.filter(v => v.name === row.upgradeRole)[0].id,
          upgradeType: '' + row.upgradeType,
          remark: row.upgradeType == 0 ? '' + row.upgradeInterval : row.upgradeReason,
          // upgradeInterval: row.upgradeInterval,
          // upgradeReason: row.upgradeReason,
          id: row.id,
        };
      } else {
        this.addtitle = `${this.$t('fault.NewEscalation')}`
        this.$refs['formValidate'].resetFields()
        this.formItem.id = null
      }
      this.addModal = true;
    },
    // 新增提交
    handleSubmit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          const params = {
            upgradeNode: this.formItem.upgradeNode,
            grade: this.formItem.grade,
            upgradeRole: this.formItem.upgradeRole,
            upgradeType: this.formItem.upgradeType,
            upgradeInterval: this.formItem.upgradeType == '0' ? this.formItem.remark : '',
            upgradeReason: this.formItem.upgradeType == '1' ? this.formItem.remark : '',
          };
          if (this.formItem.id) params.id = this.formItem.id;
          this.axios({
            method: "post",
            url: `/dms/upgrade/${this.formItem.id ? "updateUpgrade" : "insertUpgrade"
              }`,
            data: params,
          }).then((res) => {
            if (res.code === 200) {
              this.addModal = false;
              this.changeNum();
              this.$Message.success(this.formItem.id ? "编辑成功" : "新建成功");
            } else {
              this.$Message.warning({
                content: res.msg,
                duration: 6,
                closable: true,
              });
            }
          });
        }
      });
    },
    // 删除操作
    handleDelete() {
      this.axios({
        method: "post",
        url: "/dms/upgrade/deleteByIds",
        data: { ids: this.deleteIds },
      }).then((res) => {
        if (res.code === 200) {
          this.deleteModal = false;
          this.$Message.success("删除成功");
          this.changeNum();
          this.deleteIds = []
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    reset (){
      this.searchParams = {};
      this.changeNum();
    },
    //分页
    changeNum() {
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },
    changePageNum(val) {
      this.pageNum = val;
      this.searchList();
    },
    //查询列表
    searchList() {
      let params = {
        upgradeNode: this.searchParams.upgradeNode,
        grade: this.searchParams.grade,
        upgradeRole: this.searchParams.upgradeRole,
        upgradeType: this.searchParams.upgradeType,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      this.axios({
        method: "post",
        url: "/dms/upgrade/queryPage",
        data: params,
      }).then((res) => {
        if (res.code === 200) {
          this.dataSource = res.data.list;
          this.total = res.data.total;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    onSelectChange(selection) {
      this.deleteIds = selection.map((item) => item.id);
    },
    //下载模板
    exportTemplate() {
      const filName = "升级机制下载模板";
      this.axios({
        method: "get",
        url: "/dms/upgrade/downloadTemplate",
        responseType: "blob",
      }).then((res) => {
        fileDownload(res, filName + ".xlsx");
      });
    },
    //导出
    exportTemplateClick() {
      let params = {
        upgradeNode: this.searchParams.upgradeNode,
        grade: this.searchParams.grade,
        upgradeRole: this.searchParams.upgradeRole,
        upgradeType: this.searchParams.upgradeType,
        ids: this.deleteIds,
      };
      const filName = "升级机制";
      this.axios({
        method: "post",
        url: "/dms/upgrade/exportUpgrade",
        responseType: "blob",
        data: params,
      }).then((res) => {
        fileDownload(res, filName + ".xlsx");
      });
    },
    /*导入*/
    importExcelShow() {
      this.importExcelState = true;
    },
    importExcelChange(val) {
      this.importExcelState = false;
      if (val === "success") {
        this.$Message.success("导入成功");
        this.changeNum();
      }
    },
    // 批量删除
    deleteAll() {
      if (this.deleteIds.length == 0) {
        this.$Message.warning({
          content:`${ this.$t('common.deleteItems') }`,
          duration: 6,
          closable: true,
        });
        return;
      } else {
        this.deleteModal = true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
</style>


